<template>
	<view class="venueDetailPage">
		<!-- 骨架屏 -->
		<view v-if="isLoading" class="skeleton">
			<!-- 照片骨架屏 -->
			<div>
				<u-skeleton :loading="true" avatar avatarShape="square" avatarSize="500rpx" :title="false"
				 :animate="true"  class="skeleton-swiper" style="padding-top: 40rpx;">
				</u-skeleton>
			</div>
			<!-- 文字介绍骨架屏 -->
			<view class="skeleton-name-type">
				<u-skeleton :loading="true" title titleHeight="22rpx" titleWidth="30%" :animate="true"
					style="margin-top: 40rpx;"></u-skeleton>
				<u-skeleton :loading="true" title titleHeight="22rpx" titleWidth="30%" :animate="true"
					style="margin-top: 20rpx;"></u-skeleton>
				<u-skeleton :loading="true" title titleHeight="22rpx" titleWidth="30%" :animate="true"
					style="margin-top: 20rpx;"></u-skeleton>
			</view>
			<!-- 分区场馆骨架屏 -->
			<view style="margin-top: 20rpx;">
				<u-skeleton :loading="true" avatar avatarShape="square" avatarSize="200rpx" title titleHeight="30rpx"
					titleWidth="70%" :animate="true" rows="2" rowsWidth="90%" class="skeleton-screen full-screen" style="margin-top: 30rpx;">
				</u-skeleton>
				<u-skeleton :loading="true" avatar avatarShape="square" avatarSize="200rpx" title titleHeight="30rpx"
					titleWidth="70%" :animate="true" rows="2" rowsWidth="90%" class="skeleton-screen full-screen"
					style="margin-top: 20rpx;">
				</u-skeleton>
				<u-skeleton :loading="true" avatar avatarShape="square" avatarSize="200rpx" title titleHeight="30rpx"
					titleWidth="70%" :animate="true" rows="2" rowsWidth="90%" class="skeleton-screen full-screen"
					style="margin-top: 20rpx;">
				</u-skeleton>
			</view>
		</view>
		<!-- 实际内容 -->
		<view v-else class="venueDetailPage">
			<view class="venueDetail">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(imageItem, index) in venueData.pictureList || []" :key="index">
						<image class="venue-image" :src="urlConstruct(imageItem.url)" lazy-load="true" mode="aspectFill"
							@error="onImageError(index)">
						</image>
					</swiper-item>
				</swiper>
				<view class="name-type">
					<view class="name">{{ venueData.name }}</view>
					<view class="venue-tags">
						<view class="typeName">{{ venueData.typeName }}</view>
					</view>

					<!-- <view class="typeName">{{ venueData.statusName }}</view> -->
				</view>
				<view class="content">
					<view class="description">{{ venueData.description }}</view>
					<view class="address">
						<u-icon name="map-fill" color="#4A6DA7" size="16"></u-icon>
						<text>{{ venueData.address }}</text>
					</view>

					<view class="opentime">
						<u-icon name="clock" color="#4A6DA7" size="16"></u-icon>
						<text>{{ venueData.openTime }}</text>
					</view>
					<view class="phone">
						<u-icon name="phone-fill" color="#4A6DA7" size="16"></u-icon>
						<text>{{ venueData.phoneNumber }}</text>
					</view>
					<!-- <view class="status">状态: {{ venueData.statusName }}</view> -->
					<view class="advance">
						<u-icon name="calendar" color="#4A6DA7" size="16"></u-icon>
						<text>可提前{{ venueData.advanceBookingDay }}天预约</text>
					</view>
					<view class="start">
						<u-icon name="calendar-fill" color="#4A6DA7" size="16"></u-icon>
						<text>每天{{ venueData.startBookingTime }}开放预约</text>
					</view>
				</view>
			</view>
			<view class="venueDetailPartition">
				<view class="venue-list">
					<view class="venue-row">
						<view class="venue-item" v-for="(item,index) in venuePartitionData.data.records" :key="index"
							@click="goToBookingPage(item.id)">
							<image class="venue-image"
								:src="item.pictureList && item.pictureList.length > 0 ? urlConstruct(item.pictureList[0].url) : '{{item.url}}'"
								lazy-load="true" mode="aspectFill" @error="onImageError(index)">
							</image>
							<view class="venue-info">
								<view class="venue-name-tag">
									<view class="venue-name">{{truncateName(item.name)}}</view>
									<view class="venue-tags">
										<text class="tag">{{item.typeName}}</text>
									</view>

								</view>
								<view class="venue-meta">
									<view class="description">
										<u-icon name="order" color="#666" size="13"></u-icon>
										<text class="text-ellipsis">{{item.description}}</text>
									</view>

								</view>
								<view class="venue-num">
									<text>分区场数: {{item.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";
	import {
		getVenueById
	} from '@/api/venueDetail/venueDetail.js'; // 引入 API 请求函数
	import {
		getPartitionById
	} from '@/api/venueDetail/venuePartition.js';
	import {
		data,
		onLoad
	} from 'uview-ui/libs/mixin/mixin';
	export default {
		components: {},
		data() {
			return {
				venueData: [],
				venuePartitionData: {
					data: {
						current: 0,
						size: 10,
						venueId: undefined,
						records: []
					}
				},
				indicatorDots: true, // 显示指示点
				autoplay: true, // 自动播放
				interval: 5000, // 自动切换时间间隔
				duration: 500, // 滑动动画时长
				isLoading: true // 控制骨架屏显示
			};
		},
		onLoad() {
			const id = this.$route.query.id;
			console.log('接收到的 id 参数:', id);
			console.log(typeof id);
			this.fetchVenueData(id);
			// const venueId = Number(id)//会丢失一定精度
			// const venueId = BigInt(id)//类型不符
			this.fetchPartitionData(id);
		},
		methods: {
			urlConstruct(url) {
				return picUrlConstruct(url);
			},
			async fetchVenueData(id) {
				try {
					const response = await getVenueById(id);
					this.venueData = response.data; // 将获取的数据赋值给 venueData
					// console.log('根据id获取场馆:', this.venueData)
					// 检查场馆数据是否也加载完成
					if (this.venueData.length > 0) {
						this.isLoading = false;
					}
				} catch (error) {
					console.error('获取场馆数据失败:', error);
				} finally {
					this.isLoading = false;
				}
			},
			async fetchPartitionData(id) {
				try {
					// const bigIntId = BigInt(id);
					const partitionListReqDTO = {
						current: 0,
						size: 10,
						venueId: id
						// venueId: bigIntId
						// venueId: bigIntId.toString() 
					};
					console.log('传递给 getPartitionById 的参数:', partitionListReqDTO);
					const responseData = await getPartitionById(partitionListReqDTO);
					this.venuePartitionData.data.records = responseData.data.records;
					// 检查分区数据是否也加载完成
					if (this.venuePartitionData.data.records.length > 0) {
						this.isLoading = false;
					}
					// console.log('获取分区场馆列表数据:', JSON.stringify(venuePartitionData));
					// console.log('获取分区场馆列表数据:', this.venuePartitionData);
					// console.log('获取分区场馆列表数据:', JSON.stringify(this.venuePartitionData.records));
				} catch (error) {
					// console.error('获取分区场馆列表数据失败:', error);
				} finally {
					this.isLoading = false;
				}
			},
			onImageError(key) {
				console.log(`图片加载失败，索引: ${key}`);
			},
			truncateName(name) {
				if (name && name.length > 13) {
					return name.slice(0, 10) + '(··';
				}
				return name;
			},
			// 添加跳转方法
			goToBookingPage(id) {
				const today = this.getTodayDate();
				uni.navigateTo({
					url: `/pages/book/book?id=${id}&date=${today}` // 传递默认日期
				});
			},
			// 获取今天的日期
			getTodayDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		}
	};
</script>

<style scoped lang="scss">
	.skeleton{
		margin-left: 50rpx;
	}
	.venueDetailPage {
		min-height: 100vh;
		background-size: 100%;
		background-color: #f7f7f9;
		padding-bottom: 20rpx;

		.venueDetail {
			margin-bottom: 10px;

			.swiper {
				justify-content: center;
				/* 水平居中 */
				align-items: center;
				height: 500rpx;
				width: 100%;

				/* width: 100%; */
				/* 垂直居中 */
				.venue-image {
					height: 100%;
					width: 100%;
					display: block;
					margin: 0 auto;
					border-bottom-left-radius: 5%;
					border-bottom-right-radius: 5%;
				}
			}

			.name-type {
				display: flex;
				/* justify-content: flex-end; */
				align-items: center;
				font-size: 24rpx;
				margin-right: 5px;
				margin-left: auto;

				.name {
					/* font-size: 20px; */
					/* font-weight: 700; */
					margin: 12px;
					font-size: 36rpx;
					font-weight: 700;
					color: #333;
				}

				.venue-tags {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 24rpx;
					margin-right: 5px;
					margin-left: auto; // 新增样式，将元素推到最右边

					.typeName {
						background-color: #e8f0fe;
						padding: 6rpx 16rpx;
						border-radius: 16rpx;
						color: #4a6da7;
						font-size: 22rpx;
						font-weight: 600;
					}
				}
			}

			.content {
				border-bottom: 1.3px solid #e8e8e8;
				border-top: 1.3px solid #e8e8e8;
				padding: 2px;
				margin-left: 14px;
				margin-right: 22px;

				.description {
					/* font-size: 16px;
					color: #7e7b6b;
					margin: 12px;
					margin-top: 0px;
					margin-bottom: 8px; */
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					margin-bottom: 20rpx;
					font-weight: 500;
				}

				.address {
					display: flex;
					/* margin-left: 6px;
					margin-bottom: 5px; */
					align-items: center;
					padding: 12rpx 0;
					font-size: 26rpx;
					color: #555;

					text {
						/* margin-left: 5px; */
						margin-left: 10rpx;
						font-weight: 500px;
					}
				}

				.opentime {
					display: flex;
					/* margin-left: 6px;
					margin-bottom: 5px; */
					align-items: center;
					padding: 12rpx 0;
					font-size: 26rpx;
					color: #555;

					text {
						/* margin-left: 5px; */
						margin-left: 10rpx;
						font-weight: 500px;
					}
				}

				.phone {
					display: flex;
					/* margin-left: 6px;
					margin-bottom: 5px; */
					align-items: center;
					padding: 12rpx 0;
					font-size: 26rpx;
					color: #555;

					text {
						/* margin-left: 5px; */
						margin-left: 10rpx;
					}
				}

				.advance {
					display: flex;
					/* margin-left: 6px;
					margin-bottom: 5px; */
					align-items: center;
					padding: 12rpx 0;
					font-size: 26rpx;
					color: #555;

					text {
						/* margin-left: 5px; */
						margin-left: 10rpx;
					}
				}

				.start {
					display: flex;
					/* margin-left: 6px; */
					align-items: center;
					padding: 12rpx 0;
					font-size: 26rpx;
					color: #555;

					text {
						/* margin-left: 5px; */
						margin-left: 10rpx;
					}
				}
			}
		}

		.venueDetailPartition {
			padding: 0 20rpx;

			.venue-list {
				.venue-row {
					.venue-item {
						background-color: #fff;
						border-radius: 16rpx;
						padding: 20rpx;
						margin-bottom: 20rpx;
						display: flex;
						box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

						.venue-image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 12rpx;
							background-color: #f5f5f5;
						}

						.venue-info {
							flex: 1;
							padding-left: 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.venue-name-tag {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.venue-name {
									font-size: 30rpx;
									font-weight: 600;
									color: #333;
									max-width: 70%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.tag {
									background-color: #e8f0fe;
									padding: 6rpx 16rpx;
									border-radius: 20rpx;
									color: #4a6da7;
									font-size: 22rpx;
									font-weight: 600;
								}
							}

							.venue-meta {
								.description {
									display: flex;
									align-items: center;
									color: #888;
									font-size: 24rpx;
									margin: 10rpx 0;

									.text-ellipsis {
										max-width: 300rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}

							.venue-num {
								font-size: 24rpx;
								color: #4a6da7;
							}
						}
					}
				}
			}
		}
	}
</style>